<!DOCTYPE html>
<html>
<head>
  <title>职位搜索</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <link href="css/searchStyles.css" type="text/css" rel="stylesheet"/>
  <meta charset="utf-8">
  <script type="text/javascript" src="js/login.js"></script> 
  <script src="js/bootstrap.min.js"></script>
  <script src="js/jquery-2.2.3.min.js"></script>
  <script src="js/ip.js"></script>
    <!--
    for bootstrap table
  -->
  <link rel="stylesheet" href="css/bootstrap.css" />
  <link rel="stylesheet" href="css/bootstrap-table.css" /> 
  <script src="js/popper.min.js"></script>  
  <script src="js/bootstrap.js"></script> 
  <script src="js/bootstrap-table.js"></script>
  <script type="text/javascript" src="js/bootstrap-table-zh-CN.js"></script>

  <script type="text/javascript">
    function clearAllInput(){
      document.getElementById("search_input").value="";
      document.getElementById("pos_input").value="";
      document.getElementById("salary_input").value="";
      document.getElementById("showResult").innerHTML="";
    }

    function showSearchResult(dataList){
      var result="";
      result+='<table id="resultTable" border="1">';
      result+='<tr><th>职位名称</th><th>区域</th><th>学历要求</th></tr>';
      for(var id in dataList){          
        var name=dataList[id]['jobName'];
        var area=dataList[id]['location'];
        var edu=dataList[id]['education'];
        var str='<tr><td>'+name+'</td><td>'+area+'</td><td>'+edu+'</td></tr>';
        result+=str;
      }
        //show json result

        result+='</table>';
        document.getElementById("showResult").innerHTML=result;
      }

      function showResultWithBootstrap(dataList){
        var result="";
        result+='<table id="resultTable"> </table>';      
        document.getElementById("showResult").innerHTML=result;
        var dataToShow=[];
        
        for(var id in dataList){          
          var name=dataList[id]['jobName'];
          var area=dataList[id]['location'];
          var edu=dataList[id]['education'];
          var salary=dataList[id]['salary'];  
          var company=dataList[id]['company'];
          dataToShow[id]={"name":name,"area":area,"education":edu,"salary":salary,"company":company};
        }
        
        $(function () {
          $('#resultTable').bootstrapTable({
            method: 'get',
            cache: false,
            striped: true,
            pagination: true,
            pageSize: 5,
            pageNumber:1,
            pageList: [5, 10, 15, 20],
            smartDisplay:false,
            sidePagination:'client',
            showColumns: false,
            showRefresh : false, // 是否显示刷新按钮
            showExport: false,
            search: true,
            clickToSelect: false,
            columns: 
            [
            {field:"checked",checkbox:true},
            {field:"name",title:"职位名称",align:"center",valign:"middle",sortable:"false"},
            {field:"area",title:"区域",align:"center",valign:"middle",sortable:"false"},
            {field:"education",title:"学历",align:"center",valign:"middle",sortable:"false"},
            {field:"salary",title:"薪资",align:"center",valign:"middle",sortable:"false"},
            {field:"company",title:"公司",align:"center",valign:"middle",sortable:"false"}
            ],
            data:dataToShow,
          });                   
        }); 
      }

      function search(){
        var job=document.getElementById("search_input").value;
        var position=document.getElementById("pos_input").value;
        var salary=document.getElementById("salary_input").value;
        if(job==""){
          alert("请输入职位!");
          return;
        }
        if(position==""){
          alert("请输入区域!");
          return;
        }
        if(salary==""){
          alert("请输入薪资!");
          return;
        }
        $("#search_button").attr("disabled", true); 
        $("#search_button").val("正在查询..");
        $.ajax({
          "url":defaultIp+"/jobinfo/search",
          "type":"post",
          "dataType":"json",
          "data":{
            "jobname":job,
            "area":position,
            "salary":salary
          },
          "success":function(result){
            console.log(result);
            //show
            //showSearchResult(result);
            $("#search_button").attr("disabled", false); 
            $("#search_button").val("查询");
            showResultWithBootstrap(result);
          },
          "error":function(result){
            console.log(result);
            $("#search_button").attr("disabled", false); 
            $("#search_button").val("查询");
            console.log("查询失败!");
            alert("查询失败!");
          }
        });
      }
    </script>
  </head>
  <body>
    <div id="container" align="center">
      <script type="text/javascript">
        // window.onload=function(){
        //   search();
        // }
      </script>
      <div id="page_title">
        <img id="page_title_img" class="img " src="images/search.png"/>
        <div id="page_title_text" class=" ">
          <p><span></span><span>职位搜索</span></p>
        </div>
      </div>
      <div id="search_panel" align="center">

        <div id="panel_form" >  
          <div id="search_text">
            <input id="search_input" value="JAVA工程师" name="search_input" type="text" placeholder="请输入职位" />
          </div>
          <div id="select_pos">
            <input id="pos_input" value="武汉" name="pos" type="text" placeholder="请输入地区">
          </div>
          <div id="select_salary">
            <input id="salary_input" value="1.5" name="salary" type="text" placeholder="请输入薪资">
          </div>
          <!--   <div id="select_edu">
             <input id="salary_input" value="15" name="salary" type="text" placeholder="请输入薪资（以k为单位）">
              <select id="education" class="btn btn-default" name="education">
                <option value="请填写薪资水平">请选择学历</option>
                <option value="大专">大专</option>
                <option value="本科" selected="true">本科</option>
                <option value="硕士">硕士</option>
                <option value="博士">博士</option>
              </select>
            </div> -->
            <div id="search">
              <input type="button" class="btn btn-default" id="search_button" style="width: 90px;margin-left: -20px;" onclick="search()" value="查询"/>
            </div>

            <div id="clear">
              <button type="button" class="btn btn-default" id="clear_button"  style="width: 90px;margin-left: -20px;" onclick="clearAllInput()">重置</button>
            </div>
          </div>
        </div> 

        <div id="showResult" align="center">

        </div>    
      </div>
    </body>
    </html>
